<template>
  <div class="order">
    <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="one">
        <el-card class="box-card1">
          <div slot="header">
            <img
              :src="o.userFace"
              style="
                width: 80px;
                height: 80px;
                border-radius: 50%;
                cursor: pointer;
              "
              @click="toPhotoHandler"
            />
          </div>
          <div class="text item" style="text-align: left">
            <h3>会员名：{{ o.username }}</h3>
            <h3>姓名：{{ o.realname }}</h3>
            <h3>手机号：{{ o.telephone }}</h3>
            <h3 v-if="o.gender === 'male'">性别：男</h3>
            <h3 v-else>性别：女</h3>
            <h3>出生日期：{{ moment(o.birth).format("YYYY-MM-DD") }}</h3>
            <h3>地址：{{ o.address }}</h3>
          </div>
        </el-card>
        <!-- 图片详情 -->
        <el-dialog
          title="会员头像"
          :visible.sync="visible_photo"
          width="50%"
          class="customer_modal"
        >
          <div>
            <el-img :src="o.userFace" width="100%" alt="" />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="visible_photo = false"
              >关闭</el-button
            >
          </span>
        </el-dialog>
        <!-- /图片详情 -->
      </el-tab-pane>
      <el-tab-pane label="订单管理" name="two">
        <div v-if="this.orderTitle !== null">{{ this.orderTitle }}</div>
        <ul v-else class="order_list" style="margin-top: 1em">
          <li class="order" v-for="o in orderData.list" :key="o.id">
            <el-row class="order_header">
              <el-col :span="6"
                >订单状态:
                <strong style="color: #30ce77; font-size: 17px">{{
                  o.status
                }}</strong></el-col
              >
              <el-col :span="6"
                >下单时间: <strong>{{ o.orderTime | fmtDate }}</strong></el-col
              >
              <el-col :span="6">订单编号:{{ o.id }}</el-col>
              <el-col :span="6"
                >订单总额:￥<span style="color: red; font-size: 15px"
                  >{{ o.total }} </span
                >/ 元
              </el-col>
            </el-row>
            <el-row>
              <el-card>
                <el-col :span="24">
                  <el-row class="order_lines">
                    <div
                      v-for="line in o.orderLines"
                      :key="line.id"
                      class="order_line"
                    >
                      <el-col :span="4">
                        <img
                          :src="line.product.photo"
                          alt=""
                          style="width: 100%; vertical-align: top"
                        />
                      </el-col>
                      <el-col :span="14">
                        <div class="order_desc">
                          <div><strong>商品名称：</strong> {{ line.name }}</div>
                          <div
                            style="
                              overflow: hidden;
                              　　text-overflow: ellipsis;
                              　　display: -webkit-box;
                              　　-webkit-line-clamp: 3;
                              　　-webkit-box-orient: vertical;
                            "
                          >
                            <strong>商品介绍：</strong>
                            {{ line.product.description }}
                          </div>
                          <div
                            style="
                              width: 100%;
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                            "
                          >
                            <strong>顾客备注：</strong> {{ o.buyerMessage }}
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <ul>
                          <li>
                            商品金额：￥<span
                              style="color: red; font-size: 15px"
                              >{{ line.price }}</span
                            >
                            / {{ line.product.unit }}
                          </li>
                          <li>数量：{{ line.num }}</li>
                          <li v-if="o.status !== '待支付'">
                            实付金额：￥<span
                              style="color: red; font-size: 15px"
                              >{{ line.price * line.num }}
                            </span>
                            / 元
                          </li>
                          <li v-else>实付金额：还未支付</li>
                          <li v-if="o.orderStatus == '待派送'">
                            快递单号：<strong>{{ o.expressCode }}</strong>
                          </li>
                        </ul>
                      </el-col>
                    </div>
                  </el-row>
                </el-col>
              </el-card>
            </el-row>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="收货信息" name="three">
        <div class="address"></div>
        <div v-if="this.addressTitle !== null">{{ this.addressTitle }}</div>
        <div v-else>
          <el-card v-for="o in addressData.list" :key="o.id" class="box-card">
            <el-row>
              <el-col :span="4">
                <img style="width: 30px" src="@/assets/images/shouhuo.webp" />
              </el-col>
              <el-col :span="18" style="text-align: left; margin-left: 1em">
                <div>收货人：{{ o.realname }}</div>
                <div>联系方式：{{ o.telephone }}</div>
                <div>
                  地址：{{ o.province }}{{ o.city }}{{ o.area }}{{ o.address }}
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import moment from "moment";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      o: {},
      visible_photo: false,
      activeName: "one",
      addressTitle: null,
      addressData: {},
      orderTitle: null,
      orderData: {},
      id: "",
      param: {
        page: 1,
        pageSize: 100,
      },
    };
  },
  computed: {},
  methods: {
    moment,
    // 去查看图片详情
    toPhotoHandler() {
      this.visible_photo = true;
    },
    back() {
      this.$router.go(-1);
    },
    handleClick(tab, event) {
      this.findOrder();
      this.findAddress();
    },
    // 查询会员订单
    findOrder() {
      get("/order/pageQuery", { ...this.param, customerId: this.id }).then(
        (response) => {
          if (response.data.list.length === 0) {
            this.orderTitle = "暂无订单数据";
          }
          this.orderData = response.data;
        }
      );
    },
    // 查询会员收货地址
    findAddress() {
      get("/address/pageQuery", { ...this.param, userId: this.id }).then(
        (response) => {
          if (response.data.list.length === 0) {
            this.addressTitle = "暂无收货信息数据";
          }
          this.addressData = response.data;
        }
      );
    },
  },
  created() {
    this.o = this.$route.query;
    this.id = this.$route.query.id;
  },
};
</script>

<style scoped>
.order_desc {
  padding: 0 1em;
}
.order_desc > div {
  line-height: 2em;
}

.order_list {
  font-size: 12px;
  border: 1px solid #f5f5f5;
  margin-bottom: 0.3em;
}
.order_list .order_header {
  background-color: #f5f5f5;
  line-height: 38px;
  padding: 0 1em;
}
.order_list .order_lines {
  padding: 1em;
  border-right: 1px solid #f5f5f5;
}
.order_list .order_lines .order_line::after {
  content: "";
  display: block;
  clear: both;
}
.order_list .order_lines .order_line {
  padding: 0.5em 0;
  border-bottom: 1px solid #f5f5f5;
}
.order_list .order_lines .order_line:last-child {
  border-bottom: none;
}
.order_list .order_lines li {
  line-height: 20px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card1 {
  width: 300px;
  text-align: center;
}
.box-card {
  width: 300px;
  text-align: center;
}
</style>
